<template>
  <div>
    <el-card>
      <el-row type="flex" align="middle">
        <el-col :span="2" class="title">审批类型：</el-col>
        <el-col style="height: 40px;line-height:40px">
          <el-radio-group v-model="selectData.processName" @input="getNewData">
            <el-radio label="离职" />
            <el-radio label="请假" />
            <el-radio label="加班" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row type="flex" align="middle">
        <el-col :span="2" class="title">审批状态：</el-col>
        <el-col style="height: 40px;line-height:40px">
          <el-radio-group v-model="selectData.processState" @input="getNewData">
            <el-radio :label="1">审批中</el-radio>
            <el-radio :label="2">审批通过</el-radio>
            <el-radio :label="3">审批不通过</el-radio>
            <el-radio :label="4">撤销</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-table :data="dataForm">
        <el-table-column label="序号" type="index" />
        <el-table-column label="审批类型" prop="processName" align="center" />
        <el-table-column label="申请人" prop="username" align="center" />
        <el-table-column label="当前审批人" prop="procCurrNodeUserName" align="center" />
        <el-table-column label="申请时间" prop="procApplyTime" align="center">
          <template slot-scope="{row}">
            <span>{{ row.procApplyTime | formateDateByStamp }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审批状态" prop="processState" align="center">
          <template slot-scope="{row}">
            <span>{{ row.processState | filterStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-row type="flex">
              <el-col>
                <el-button type="text" size="small">通过</el-button>
                <el-button type="text" size="small">驳回</el-button>
                <el-button type="text" size="small">查看</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="pageInfo.total"
          @current-change="change"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getAllApprovalsList } from '@/api/approvals'
export default {
  name: 'AllApprovals',
  filters: {
    filterStatus(val) {
      return val === 1 ? '审批中' : (val === 2 ? '审批通过' : (val === 3 ? '审批不通过' : '撤销'))
    }
  },
  data() {
    return {
      selectData: {
        processName: '',
        processState: ''
      },
      pageInfo: {
        page: 1,
        size: 10,
        total: 0
      },
      dataForm: [{
        procApplyTime: '',
        procCurrNodeUserName: '',
        processName: '',
        processState: '',
        username: ''
      }]
    }
  },
  created() {
    this.getAllApprovalsList()
  },
  methods: {
    async getAllApprovalsList() {
      try {
        const { rows, total } = await getAllApprovalsList({ ...this.pageInfo, ...this.selectData })
        // console.log(rows)
        this.dataForm = rows
        this.pageInfo.total = total
      } catch (error) {
        console.log(error)
      }
    },
    change() {
      this.pageInfo.page++
      this.getAllApprovalsList()
    },
    getNewData() {
      console.log(111)
      this.getAllApprovalsList()
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  text-align: right;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}
</style>
